<template>
    <h-modal :title='title' destroyOnClose width='62%' :visible='visible' @cancel='handleCancel'>
        <h-form :config='formConfig' ref='formRef' :options='formOptions' v-model='model' @change='formChange' />
        <template slot='footer'>
            <a-button type='danger' @click='handleCancel'> 关闭</a-button>
            <a-button :loading='confirmLoading' type='primary'
                      @click='submit'> 保存
            </a-button>
        </template>
    </h-modal>
</template>

<script>
    import { postAction } from '@/api/manage';
    import {getSetFilesByForm, getSelectOptions,getSetDateTimeByForm,getSetMultipleSelectIdByForm, clearSelectOptions } from '@/views/hifar/publicData';
    <#assign selectUser = false>
    <#assign selectDept = false>
    <#list fieldData as item>
    <#assign fieldShowType = item.fieldShowType>
    <#if fieldShowType == "13">
    <#assign selectUser = true>
    </#if>
    <#if fieldShowType == "14">
    <#assign selectDept = true>
    </#if>
    </#list>
    <#if selectUser == true || selectDept == true>
    import Vue from 'vue'
    </#if>
    <#if selectUser == true>
    import SysUserSelect from '@/views/components/SysUserSelect.vue';
    Vue.component('SysUserSelect', SysUserSelect);
    </#if>
    <#if selectDept == true>
    import HDepartSelect from '@/components/HiFar/HDepartSelect.vue';
    Vue.component('HDepartSelect', HDepartSelect);
    </#if>
    export default {
        name: '${webPrefix}Modal',
        data() {
            return {
                formConfig: {
                    layout: 'inline',
                    columns: 2
                },
                confirmLoading: false,
                visible: false,
                model: {},
                title: '',
                handleType: '',
                formOptions: [
                    { type: 'input', key: 'id', hidden: true },
                    <#list fieldData as item>
                    <#assign fieldName = item.dbFieldName>
                    <#assign fieldShowName = item.fieldShowName>
                    <#assign isShowList = item.isShowList>
                    <#assign isShowForm = item.isShowForm>
                    <#assign fieldShowType = item.fieldShowType>
                    <#assign fieldMustInput = item.fieldMustInput>
                    <#assign dictOriginType = item.dictOriginType>
                    <#assign dictKey = item.dictKey>
                    <#if fieldShowType?has_content>
                    <#switch fieldShowType>
                    <#--            // 文本框-->
                    <#case "1">
                    {
                        title: '${fieldShowName}',
                        key: '${fieldName}',
                        type: 'input',
                        hidden: <#if isShowForm == true>false<#else>true</#if>,
                        <#if fieldMustInput == true>
                        rules: [{ required: true, message: '请输入${fieldShowName}' }],
                        </#if>
                        options: {
                            placeholder: `请输入${fieldShowName}`,
                        },
                    },
                    <#break>
                    <#-- 单选框-->
                    <#case "2">
                    {
                        title: '${fieldShowName}',
                        key: '${fieldName}',
                        type: <#if dictOriginType == "1">'h-radio-dict'<#elseif dictOriginType == "2">'radio'<#else>'radio'</#if>,
                        hidden: <#if isShowForm == true>false<#else>true</#if>,
                        <#if fieldMustInput == true>
                        rules: [{ required: true, message: '请选择${fieldShowName}' }],
                        </#if>
                        options: {
                            dictCode:<#if dictOriginType == "1"><#assign dictCode = item.dictField>"${dictCode}"<#else>""</#if>,
                            placeholder: `请选择${fieldShowName}`,
                            options: [],
                        },

                    },
                    <#break>
                    <#--                // 多选框-->
                    <#case "3">
                    {
                        title: '${fieldShowName}',
                        key: '${fieldName}',
                        type: <#if dictOriginType == "1">'h-checkbox-dict'<#elseif dictOriginType == "2">'checkbox'<#else>'checkbox'</#if>,
                        hidden: <#if isShowForm == true>false<#else>true</#if>,
                        <#if fieldMustInput == true>
                        rules: [{ required: true, message: '请选择${fieldShowName}' }],
                        </#if>
                        options: {
                            dictCode:<#if dictOriginType == "1"><#assign dictCode = item.dictField>"${dictCode}"<#else>undefined</#if>,
                            options: [],
                        },
                    },
                    <#break>
                    <#--                // 日期(yyyy-MM-dd)-->
                    <#case "5">
                    {
                        title: '${fieldShowName}',
                        key: '${fieldName}',
                        type: 'h-date',
                        hidden: <#if isShowForm == true>false<#else>true</#if>,
                        sortAble: '1',
                        options: {
                            format:"YYYY-MM-DD",
                            placeholder: "请选择${fieldShowName}",
                        },
                    },
                    <#break>
                    <#--                // 日期(yyyy)-->
                    <#case "6">
                    {
                        title: '${fieldShowName}',
                        key: '${fieldName}',
                        type: 'h-date-year',
                        hidden: <#if isShowForm == true>false<#else>true</#if>,
                        sortAble: '1',
                        options: {
                            placeholder: "请选择${fieldShowName}",
                        },
                    },
                    <#break>
                    <#--                // 日期(yyyy-MM-dd HH:mm:ss)-->
                    <#case "7">
                    {
                        title: '${fieldShowName}',
                        key: '${fieldName}',
                        type: 'h-date',
                        hidden: <#if isShowForm == true>false<#else>true</#if>,
                        sortAble: '1',
                        options: {
                            showTime: true,
                            format:"YYYY-MM-DD HH:mm:ss",
                            placeholder: "请选择${fieldShowName}",
                        },
                    },
                    <#break>
                    <#--                // 多行文本-->
                    <#case "8">
                    {
                        title: '${fieldShowName}',
                        key: '${fieldName}',
                        type: 'textarea',
                        hidden: <#if isShowForm == true>false<#else>true</#if>,
                        span: 2,
                        <#if fieldMustInput == true>
                        rules: [{ required: true, message: '请输入${fieldShowName}' }],
                        </#if>
                        options: {
                            placeholder: `请输入${fieldShowName}`,
                        },
                    },
                    <#break>
                    <#--                // 文件-->
                    <#case "9">
                    {
                        title: '${fieldShowName}',
                        key: '${fieldName}',
                        type: 'h-upload-files',
                        hidden: <#if isShowForm == true>false<#else>true</#if>,
                        span: 2,
                        <#if fieldMustInput == true>
                        rules: [{ required: true, message: '请上传${fieldShowName}' }],
                        </#if>
                        options: {},
                    },
                    <#break>
                    <#--                // 下拉框-->
                    <#case "10">
                    {
                        title: '${fieldShowName}',
                        key: '${fieldName}',
                        type: <#if dictOriginType == "1">'dict'<#elseif dictOriginType == "2">'select'<#else>'select'</#if>,
                        hidden: <#if isShowForm == true>false<#else>true</#if>,
                        <#if fieldMustInput == true>
                        rules: [{ required: true, message: '请选择${fieldShowName}' }],
                        </#if>
                        options: {
                            dictCode: <#if dictOriginType == "1"><#assign dictCode = item.dictField>"${dictCode}"<#else>""</#if>,
                            options: [],
                        },
                    },
                    <#break>
                    <#--                // 下拉多选-->
                    <#case "11">
                    {
                        title: '${fieldShowName}',
                        key: '${fieldName}',
                        type: <#if dictOriginType == "1">'dict'<#elseif dictOriginType == "2">'select'<#else>'select'</#if>,
                        hidden: <#if isShowForm == true>false<#else>true</#if>,
                        <#if fieldMustInput == true>
                        rules: [{ required: true, message: '请选择${fieldShowName}' }],
                        </#if>
                        options: {
                            mode: "multiple",
                            dictCode: <#if dictOriginType == "1"><#assign dictCode = item.dictField>"${dictCode}"<#else>""</#if>,
                            options: [],
                        },
                    },
                    <#break>
                    <#--                // 数值-->
                    <#case "12">
                    {
                        title: '${fieldShowName}',
                        key: '${fieldName}',
                        type: 'inputNumber',
                        hidden: <#if isShowForm == true>false<#else>true</#if>,
                        <#if fieldMustInput == true>
                        rules: [{ required: true, message: '请输入${fieldShowName}' }],
                        </#if>
                        options: {
                            placeholder: `请输入${fieldShowName}`,
                        },
                    },
                    <#break>
                    <#--                // 人员选择-->
                    <#case "13">
                    {
                        title: '${fieldShowName}',
                        key: '${fieldName}',
                        type: 'sysUserSelect',
                        hidden: <#if isShowForm == true>false<#else>true</#if>,
                        <#if fieldMustInput == true>
                        rules: [{ required: true, message: '请选择${fieldShowName}' }],
                        </#if>
                        options: {
                            placeholder: `请选择${fieldShowName}`,
                        },
                    },
                    <#break>
                    <#--                // 部门选择-->
                    <#case "14">
                    {
                        title: '${fieldShowName}',
                        key: '${fieldName}',
                        type: 'HDepartSelect',
                        hidden: <#if isShowForm == true>false<#else>true</#if>,
                        <#if fieldMustInput == true>
                        rules: [{ required: true, message: '请选择${fieldShowName}' }],
                        </#if>
                        options: {
                            placeholder: `请选择${fieldShowName}`,
                        },
                    },
                    <#break>
                    <#default>
                    {
                        title: '${fieldShowName}',
                        align: 'center',
                        dataIndex: '${fieldName}',
                        key: '${fieldName}',
                        dataType: 'text',
                        matchType: 'contain',
                        defaultSearchFlag: '1',
                        searchFlag: '1',
                        sortAble: '1',
                        customRender: (text) => {
                            return text || '';
                        }
                    },
                    <#break>
                    </#switch>
                    </#if>
                    </#list>
                ],
                url: {
                    queryById: '/${webPrefix}Controller/queryById',
                    add: '/${webPrefix}Controller/add',
                    edit: '/${webPrefix}Controller/edit'
                }
            };
        },

        created(){
            clearSelectOptions(this.formOptions)
                let config = [
                    <#list fieldData as item>
                    <#assign fieldName = item.dbFieldName>
                    <#assign dictOriginType = item.dictOriginType>
                    <#assign dictTable = item.dictTable>
                    <#assign dictField = item.dictField>
                    <#assign dictText = item.dictText>
                    <#if dictOriginType == "2">
                     { dictTable: "${dictTable}", dictField: "${dictField}", dictText: "${dictText}", optionKey: "${fieldName}" },
                    </#if>
                    </#list>
                ]
                getSelectOptions(config, this.formOptions)
            },
        methods: {
            show(record, type = 'edit') {
                this.handleType = type;
                this.model = {};
                this.visible = true;
                this.title = type === 'edit' ? '编辑' : '新增';
                if (['edit'].includes(type)) {
                    postAction(this.url.queryById, { id: record.id }).then((res) => {
                        const { code, data } = res;
                        if (code === 200) {
                            this.model = {
                                ...data,
                                ...getSetFilesByForm(this.formOptions, data, 'set'),
                                ...getSetDateTimeByForm(this.formOptions, data, 'set'),
                                ...getSetMultipleSelectIdByForm(this.formOptions, data, 'set')
                            };
                        }
                    });
                }
            },
            submit() {
                this.$refs.formRef.getData();
            },
            formChange(values) {
                if (this.confirmLoading) return;
                this.confirmLoading = true;
                const params = {
                    ...values,
                     ...getSetFilesByForm(this.formOptions, values),
                    ...getSetDateTimeByForm(this.formOptions, values),
                    ...getSetMultipleSelectIdByForm(this.formOptions, values)
                };
                const url = this.url[this.handleType]
                postAction(url, params).then((res) => {
                    const { code = 0 } = res;
                    if (code === 200) {
                        this.$message.success(this.title + '成功');
                        this.handleCancel();
                        this.$emit('change');
                    }
                }).finally(() => {
                    this.confirmLoading = false;
                });
            },
            handleCancel() {
                this.visible = false;
            }
        }
    };
</script>

<style scoped lang='less'>

</style>